$(document).ready(function() {
    var t;
    var index = 0;
    var times = 3000;
    t = setInterval(play, times);

    function play() {
        index++;
        if (index > 4) {
            index = 0;
        }
        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000);

        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr');
    }
    $('.cir').click(function() {
        $(this).addClass('cr').siblings().removeClass('cr')
        index = $(this).index();
        $('.img').eq(index).fadeIn(600).siblings().fadeOut(600);
    });

    $('.banner').hover(function() {
        clearInterval(t);
    }, function() {
        t = setInterval(play, times);

        function play() {
            index++;
            if (index > 4) {
                index = 0;
            }
            $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000);
            $('.cir').eq(index).addClass('cr').siblings().removeClass('cr');
        }
    });
});